
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="img/favicon.png">
    
    <link rel="stylesheet" href="http://cdn.bootcss.com/semantic-ui/2.1.8/semantic.min.css">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
html, body
{
    height: 0%;
}
body {
    background-color: #FFFFFF;
}
.ui.menu .item img.logo {
    margin-right: 1.5em;
}
.ui.menu{
    border-radius: 0rem;
}

.ui.definition.table td:nth-child(2) {
    border-left: 0;
}

.main.container {
    width: 60em;
    margin-top: 6em;
    min-height: 100%;
    padding-top: 0em;
    padding-right: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 3em;

}
.main.container .FooterPush{
    height: 7em;
}
.centerlog {
    display: block;
    margin: auto;
    height: 10rem;
}
.ui.search{
    margin-top: 4em;
}
.ui.input{
    text-align: center;
    display: block;
    margin: auto;

}
.ui.sbuttons{
    text-align: center;
    display: block;
    margin: auto;
    padding: 1em;
}
.ui.button{
    margin-top: 1em;
}
.prompt{
    width: 60em;
}
.ui.footer.segment {
    clear: both; /* 清除浮动元素格式 */
    position: relative;
    margin-top: -4em; /* Footer 高度的负值 */
    height: 4em;
}
.footer-inner{
    text-align: center;
}
.ui.stables{
    padding-top: 2em;

}
</style>
    <title>咖啡导航</title>
    <meta name="description" content="咖啡导航,聚合搜索,导航网站">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    
</head>
<body id="killie">
<!--使用了Semantic-UI进行美化-->
<div class="ui inverted menu borderless">
    <div class="ui container">
        <span class="header item">咖啡导航</span>
        <a class="ui item right floated" href="https://space.bilibili.com/30847042" target="_blank"><b>bilibili</b></a>
    </div>
</div>
<div class="ui main container">
    <img class="centerlog" src="">
    <div class="ui search">
        <div class="ui input">
            <input id="search" name="wd" class="prompt" placeholder="" type="text" autofocus="autofocus">
    </div>
</div>
    <div class="ui sbuttons">
        <button class="ui button" id="baidu">
            百度
        </button>
        <button class="ui button" id="Fsou">
            Fsou
        </button>
        <button class="ui button" id="bing">
            必应
        </button>
        <button class="ui button" id="magi">
            Magi
        </button>
        <button class="ui button" id="quark">
            夸克
        </button>
        <button class="ui button" id="sogou">
            搜狗
        </button>
        <button class="ui button" id="bilibili">
            bilibili
        </button>
        
        <button class="ui button" id="zhihu">
            知乎
        </button>
        <button class="ui button" id="google">
            谷歌
        </button>
        
        <button class="ui button" id="fanyi">
            翻译
        </button>
        <button class="ui button" id="github">
            GitHub
        </button>
        
        <button class="ui button" id="youtube">
            YouTube
        </button>
    </div>
    <div class="ui two column grid stables">
    <div class="column">
        <table class="ui definition small table">
            <tbody>
            <tr>
                <td align="center">摸鱼</td>
                <td align="center"><a href="https://www.githubs.cn/" target="_blank">github中文</a></td>
                <td align="center"><a href="https://mo.fish/" target="_blank">鱼塘</a></td>
                <td align="center"><a href="https://adzhp.cn/" target="_blank">爱达杂货铺</a></td>
                <td align="center"><a href="https://sunpma.com/other/music/" target="_blank">听歌</a></td>
            </tr>
            </tbody>
            <tbody>
            <tr>
                <td align="center">软件</td>
                <td align="center"><a href="https://www.appinn.com/" target="_blank">小众软件</a></td>
                <td align="center"><a href="https://www.iplaysoft.com/" target="_blank">异次元</a></td>
                <td align="center"><a href="https://www.macxin.com/" target="_blank">MAC萌新网</a></td>
                <td align="center"><a href="https://icp.gov.moe/aboutus.php" target="_blank">萌国</a></td>
            </tr>
            </tbody>
             
        </table>
    </div>
    
<!--搜索引擎-->
<script>
const sInfor = document.getElementById("search");
const sBaidu = document.getElementById("baidu");
const sGoogle = document.getElementById("google");
const sBing = document.getElementById("bing");
const sFsou = document.getElementById("Fsou");
const sZhihu = document.getElementById('zhihu');
const sFanyi = document.getElementById("fanyi");
const sGitHub = document.getElementById("github");
const sBilibili = document.getElementById("bilibili");
const smagi = document.getElementById("magi");
const squark = document.getElementById("quark");
const ssogou = document.getElementById("sogou");
const sYouTube = document.getElementById('youtube')
//isEmpty;
let isEmpty =function (obj)  {
    if (obj === null) return true;
    if (typeof obj === 'undefined') {
      return true;
    }
    if (typeof obj === 'string') {
        let reg = new RegExp("^([ ]+)|([　]+)$");
        //判断有空格，如果有空格，删除左边空格；
        if( reg.test(obj)){
            obj=obj.replace(/(^\s*)/g,"");
        }
      if (obj === "") {
        return true;
      }
    }
    return false;
}
//doAction 搜索跳转方法
/*  
p：搜索网址前段 
n: 搜到网址后段
h: 搜索首页
*/
let doAction=function(p,n,s){
    if(isEmpty(sInfor.value)){
        window.open(s);
    }else{
        window.open(p+sInfor.value+n);
    }
}
//拼接网址
let p='';
let n='';
let s=''
//BaiDu
sBaidu.onclick= function()  {
    p="https://www.baidu.com/s?wd=";
    doAction(p,'',p);
};
document.onkeydown = function (e) { // 回车提交表单
    // 兼容FF和IE和Opera
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {   
              p="https://www.baidu.com/s?wd=";
              doAction(p,'',p);
              }
}
//Google
sGoogle.onclick=function(){
      p="https://www.google.com/search?q=";

    n="&gws_rd=cr&nfpr=1&newwindow=1&num=30";

    s='https://www.google.com/webhp?gws_rd=cr&nfpr=1&newwindow=1&num=30';
   doAction(p,n,s);
}
//Fsou
sFsou.onclick=function () {
    p='https://fsou.cc/search?q=';
    n=''
    s='https://fsou.cc/';
    doAction(p,n,s);
}
//Bing
sBing.onclick=function () {
    p='https://cn.bing.com/search?q=';
    n=''
    s='https://cn.bing.com/';
    doAction(p,n,s);
}
//Zhihu
sZhihu.onclick= function () {
    p='https://www.zhihu.com/search?q=';
    n='&type=content&utm_content=search_hot';
    s='https://www.zhihu.com/'
    doAction(p,n,s);
}
//翻译
sFanyi.onclick = function (){
    p='https://fanyi.baidu.com/#auto/zh/';
    n='';
    s='https://fanyi.baidu.com/';
    doAction(p,n,s);
}
//GitHub
sGitHub.onclick= function () {
    p='https://github.com/search?q=';
    n='';
    s='https://github.com'
    doAction(p,n,s);
}
//Bilibili
sBilibili.onclick =function () {
    p='https://search.bilibili.com/all?keyword=';
    n='';
    s='https://search.bilibili.com'
    doAction(p,n,s);
}
//magi
smagi.onclick= function () {
    p='https://magi.com/search?q=';
    n='';
    s='https://magi.com/'
    doAction(p,n,s);
}
//quark
squark.onclick= function () {
    p='https://quark.sm.cn/s?q=';
    n='';
    s='https://quark.sm.cn/'
    doAction(p,n,s);
}
//sogou
ssogou.onclick= function () {
    p='https://www.sogou.com/web?query=';
    n='';
    s='https://www.sogou.com/'
    doAction(p,n,s);
}
//YouTube
sYouTube.onclick =function () {
    p='https://www.youtube.com/results?search_query=';
    doAction(p,n,p);
}
</script>
</body>
</html>